<template>
  <view class="complaint">
    <view class="tab">
      <u-tabs
        :activeStyle="{ color: '#1DD39B' }"
        lineColor="#1DD39B"
        :scrollable="false"
        :list="list1"
        :current="current"
        @change="change"
      ></u-tabs>
    </view>
    <view class="list">
      <view class="list-view" v-for="(item, index) in dataList" :key="index">
        <view class="time">
          <text>提交时间：{{ meetsTime(item.create_time) }}</text
          >处理中
        </view>
        <view class="p">
          <text>问题类型：</text>
          <text>投诉</text>
        </view>
        <view class="p">
          <text>反馈内容：</text>
          <text>{{ item.content }}</text>
        </view>

        <view class="image">
          <image
            :src="sitem"
            v-for="(sitem, sindex) in item.images"
            :key="sindex"
          ></image>
        </view>

        <view class="p" v-if="item.audio">
          <text>回复：</text>
          <text>{{ item.audio }}</text>
        </view>

        <view class="btn" v-if="false">
          <text @click="close">关闭投诉</text>
        </view>
      </view>
    </view>
    <view v-if="total === 0">
      <No></No>
    </view>
  </view>
</template>

<script>
import No from "@/components/z-no/index.vue";
export default {
  data() {
    return {
      list1: [
        {
          name: "全部",
          status: 3,
        },
        {
          name: "处理中",
          status: 0,
        },
        {
          name: "已处理",
          status: 1,
        },
        {
          name: "已关闭",
          status: 2,
        },
      ],
      current: 0,
      status: 3,
      page: 1,
      dataList: [],
      total: null,
    };
  },
  onLoad() {
    this.init();
  },
  components: {
    No,
  },
  onReachBottom() {
    if (this.total === this.dataList.length) {
      return;
    }
    this.page++;
    this.init();
  },
  methods: {
    init() {
      this.$http
        .post("/api/order/complaintList", {
          status: this.status,
          page: this.page,
        })
        .then((res) => {
          let { count, list } = res;
          this.total = count;
          list.forEach((item) => {
            item.images = JSON.parse(item.images);
          });
          this.dataList.push(...list);
        });
    },
    setInit() {
      this.page = 1;
      this.total = null;
      this.dataList = [];
      this.init();
    },
    meetsTime(time, type = "/") {
      let data = new Date(time * 1000); //初始化时间
      let Y = data.getFullYear();
      let M = data.getMonth() + 1;
      M < 10 ? (M = "0" + M) : M;
      let D = data.getDate();
      D < 10 ? (D = "0" + D) : D;
      let h = data.getHours();
      h < 10 ? (h = "0" + h) : h;
      let m = data.getMinutes();
      m < 10 ? (m = "0" + m) : m;
      let s = data.getSeconds();
      s < 10 ? (s = "0" + s) : s;
      return `${Y}${type}${M}${type}${D} ${h}:${m}:${s}`;
    },
    change(e) {
      let { status } = e;
      this.status = status;
      this.setInit();
    },
    close() {
      uni.showModal({
        title: "提示",
        content: "是否确认关闭此投诉？",
        complete: (res) => {
          let { confirm } = res;
          if (confirm) {
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tab {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9;
  background-color: white;
}
.list {
  padding: 100rpx 30rpx;
  &-view {
    padding: 17rpx 30rpx;
    background-color: white;
    border-radius: 28rpx;
    margin-bottom: 23rpx;
    .time {
      color: #333333;
      font-size: 26rpx;
      display: flex;
      border-bottom: 2rpx solid #f2f2f2;
      padding-bottom: 17rpx;
      text {
        flex: 1;
      }
    }
    .p {
      color: #989898;
      font-size: 26rpx;
      display: flex;
      padding-top: 21rpx;
      text:first-if-type {
        width: 5em;
        flex-shrink: 0;
      }
      text:last-of-type {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        color: #333333;
      }
    }
    .border-top {
      border-top: 2rpx solid #f2f2f2;
    }
    .image {
      display: flex;
      flex-wrap: wrap;
      margin: 22rpx 0 25rpx;
      image {
        width: 146rpx;
        height: 146rpx;
        margin-right: 18rpx;
        border-radius: 8rpx;
      }
    }
    .btn {
      display: flex;
      padding-top: 25rpx;
      justify-content: flex-end;
      border-top: 2rpx solid #f2f2f2;
      text {
        width: 156rpx;
        height: 60rpx;
        border: 2rpx solid #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #333333;
        border-radius: 12rpx;
      }
    }
    .finished {
      color: #ff6100;
    }
  }
}
</style>
